<template>
  <div class="container-page">
    <div class="page-loading">
      <table-loading :loading="paginationLoading"></table-loading>
    </div>
    <div class="page-box">
      <el-pagination :page-sizes="pageSizes" @size-change="pageSizeChange" @current-change="currentPageChange" :page-size="pageSize" :current-page="page" layout="sizes, slot, prev, pager, next, total" :total="total" popper-class="pagination">
      </el-pagination>
    </div>
  </div>
</template>
<script>
/**
 * @author 王磊
 * @information 表格分页共用组件
 * @date 2019-1-12 17:12
 * @param {*} total 总数
 * @param {*} page  页数
 */
export default {
  props: {
    total: Number | String,
    page: Number | String,
    show: Boolean,
    paginationLoading: Boolean
  },
  data () {
    return {
      pageSizes: [20, 30, 50],
      currentPage: 1,
      pageSize: 20
    }
  },
  methods: {
    /**
    * @author 王磊
    * @information 选择显示的数据
    * @date 2019-1-12 17:14
    */
    pageSizeChange (val) {
      this.pageSize = val
      this.currentPage = 1
      this.paginationChange()
    },
    /**
    * @author 王磊
    * @information 哪一页
    * @date 2019-1-12 17:14
    */
    currentPageChange: function (val) {
      this.currentPage = val
      this.paginationChange()
      document.querySelector('#CallAmountInfo .el-table__body-wrapper').scrollTo(0, 0)
      document.querySelector('.el-table__body-wrapper').scrollTo(0, 0)
    },
    /**
    * @author 王磊
    * @information 获取分页页数
    * @date 2019-1-12 17:14
    */
    paginationChange: function () {
      this.$emit('pagination-change', this.currentPage, this.pageSize)
    }
  },
  watch: {
    page (val) {
      if (val) {
        this.currentPage = val
      }
    },
    /**
    * @author 赵美阳
    * @information 切换侧滑时更换页码
    * @date 2019-1-12 17:14
    */
    show (val) {
      if(!val){
        this.pageSizes = [20,30,50];
        this.pageSize = 20;
      }else{
        this.pageSizes = [30,50];
        this.pageSize = 30;
      }
    }
  }
}
</script>

<style>

</style>
